<template>
	<view class="container">
		<u-sticky>
			<!-- <view class="searchBar" :style="'margin-top:-'+navigationBarHeight+'px ;'"> -->
			<view class="searchBar" :style="'margin-top:'+15+'px ;'">
				<image class="logo" src="/module_mall/static/mall_index_icon_logo.png"></image>
				<view style="width: 34rpx;"></view>
				<u-search @click="searchGoods" disabled placeholder="搜索商品" class="search" shape="square"
					:showAction="true" bgColor='#EDEDED'>
				</u-search>
			</view>
		</u-sticky>



		<!-- <scroll-view class="contentView" :scroll-y="true" :style="'height:'+(viewHeight-95)+'px ;'"> -->
		<z-paging class="contentView" ref="paging" v-model="goodList" @query="getTuijijanListAPP" :fixed='false'
			:height='(viewHeight-95)+"px"' :hide-empty-view='true'>

			<!-- 轮播 -->
			<swiper class="swiper"  style="height: 211px;  " circular :indicator-dots="true" indicator-color="#ffffff"
				indicator-active-color="#EA5404"  :autoplay="true">
				<swiper-item class="swiper-item"  style="height: 211px;margin-top: 0px;  "v-for="item, inde in swiperList" :key="inde"
					@click="toBannerJump(item)">
					<image  mode="aspectFill"  class="swiper-image" style="height: 211px;  " :src="item.image||'@appstatic/car/car_banner.jpg'">
					</image>
					<!-- <u-image :src="item.image||'@appstatic/car/car_banner.jpg'" height='211px'  mode="widthFix" width="100%" style='background-color: #e5e5e588;'>
						<u-loading-icon slot="loading"></u-loading-icon>
					</u-image> -->
				</swiper-item>
			</swiper>

			<!-- 菜单 -->
			<view class="menu-list">
				<scroll-view class="scrollView" :scroll-x="true">
					<view class="pic-wrap" style="flex-direction: row;">
						<view class="menu-item" @click="menuNavigateTo(item)" v-for="(item, index) in rmenuList"
							:key="index">
							<view style="width: 150rpx;">
								<u-image mode="widthFix" width="120rpx" height="120rpx" class="menu-img"
									:src="item.icon">
									<u-loading-icon slot="loading"></u-loading-icon>
								</u-image>
							</view>
							<view class="menu-title">{{ item.name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 新品推荐 -->
			<div class="new-list-title" v-if="newList.length>0">
				<image class="bg" src="https://dnsverify.pfmoto.com/appstatic/mall/mall_title_newgood.png"></image>
				<image class="text" src="https://dnsverify.pfmoto.com/appstatic/mall/mall_title_newgood_font.png">
				</image>
			</div>
			<div class="new-list">
				<div class="new-item" @click="goodsDetail(item)" v-for="(item, index) in newList" :key="index">
					<div>
						<!-- <u-image height="200rpx" mode="aspectFit" width="100%"  class="new-img" :src="item.productImgurl">
							<u-loading-icon slot="loading"></u-loading-icon>
						</u-image> -->
						<u-image :src="item.productImgurl" height='214rpx' mode="aspectFill" width="100%"
							style='background-color: #e5e5e588;'>
							<u-loading-icon slot="loading"></u-loading-icon>
						</u-image>
					</div>
					<div class="new-desc">
						<div class="new-title">
							{{ item.productName }}
						</div>
						<div class="new-bottom">
							<div class="new-price">{{ item.price | unitPrice }}</div>
						</div>
					</div>
				</div>
			</div>
			</div>

			<!-- 为你推荐 商品列表 -->
			<image class="goods-list-title" v-if="goodList.length>0"
				src="https://dnsverify.pfmoto.com/appstatic/mall/mall_title_newgood_recomand.png"></image>

			<div class="goods-list">
				<div @click="goodsDetail(item1)" class="goods-item" v-for="(item1, item_index1) in goodList"
					:key="item_index1">
					<div class="goods-img">
						<u-image :src="item1.productImgurl" height='325rpx' mode="aspectFill" width="100%"
							style='background-color: #e5e5e588;'>
							<u-loading-icon slot="loading"></u-loading-icon>
						</u-image>
					</div>
					<div class="goods-desc">
						<div class="goods-title">
							{{ item1.productName }}
						</div>
						<div class="goods-bottom">
							<div class="goods-price">{{ item1.price | unitPrice }}</div>
							<!-- <div class="goods-way">多购买方式</div> -->
						</div>
					</div>
				</div>
			</div>



		</z-paging>

		<!-- </scroll-view> -->
	</view>
</template>

<script>
	const app = getApp();
	const network = require("@manager/network-manager.js")
	const dialog = require("@/utils/dialog.js");
	const util = require('@/utils/util.js');
	export default {
		data() {
			return {
				viewHeight: app.globalData.windowHeight - app.globalData.statusBarHeight,
				navigationBarHeight: app.globalData.navigationBarHeight,
				swiperList: [],
				rmenuList: [],
				newList: [],
				goodList: []
			}
		},
		onLoad(options) {},
		onShow() {
			this.getSwiperList()
			this.getProductCategoryAllList()
			this.getNewListAPP()
			// this.getTuijijanListAPP()
		},
		methods: {
			//搜索商品
			searchGoods: function() {
				uni.navigateTo({
					url: '/module_mall/seckill/seckill?name=搜索商品'
				})
			},
			//轮播图
			getSwiperList: function() {
				let url = app.globalData.config.BASE_URL + app.globalData.config.interfaces.URL_HOME_GET_HOME_LIST
				//轮播位置（1小程序 2APP 3官网 4H5网站）
				var isSource = 2
				//#ifdef MP-WEIXIN
				isSource = 1
				//#endif
				var params = {
					"isfrom": isSource,
					"position": 6,
					"statusFlag": 0
				};

				network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						this.swiperList = res.data
					}
				})
			},

			toBannerJump: function(e) {
				if (e.toTypeDicId == '11' || e.toTypeDicId == '12') { //11正常商品12秒杀 其他跳别的模块
					this.toCarouselDetail(e)
				} else {
					console.log(e)
					util.bannerJump(e)
				}
			},

			//轮播跳转
			toCarouselDetail: function(e) {
				var that = this
				var uri;
				var params;
				if (e.toTypeDicId == '12') { //秒杀
					uri = app.globalData.config.interfaces
						.URL_ACTIVITY_PFMALLSECKILL_ISSECKILLDOING;
					params = {
						'id': e.seckillId
					}
				} else if (e.toTypeDicId == '11') {
					uri = app.globalData.config.interfaces
						.URL_ACTIVITY_PFMALLPRODUCTS_ISPRODUCTDOING;
					params = {
						'id': e.commodityId
					}
				}

				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						if (res.data == true) {
							//商品正常
							if (e.toTypeDicId == '11') { //普通商品
								uni.navigateTo({
									url: '/module_mall/goodsDetail/goodsDetail?goodid=' + e.commodityId
								})
							} else if (e.toTypeDicId == '12') { //秒杀
								uni.navigateTo({
									url: '/module_mall/goodsDetail/goodsDetail?goodid=' + e
										.seckillId + '&isSeckill=true'
								})
							}
						} else {
							//商品异常
							if (e.toTypeDicId == '11') { //普通商品
								uni.navigateTo({
									url: '/module_mall/goodsDetail/goodsAbnormal?goodsType=1'
								})
							} else if (e.toTypeDicId == '12') { //秒杀
								uni.navigateTo({
									url: '/module_mall/goodsDetail/goodsAbnormal?goodsType=2'
								})
							}
						}
					} else {
						dialog.toast(res.message);
					}
				})

			},
			//查询分类全列表 (C端)
			getProductCategoryAllList: function() {
				var that = this
				that.rmenuList = []
				let url = app.globalData.config.interfaces
					.URL_ACTIVITY_PRODUCTCATEGORY_GETPRODUCTCATEGORYALLLIST
				var params = {};
				var miaosha = {
					'name': '秒杀',
					'icon': 'https://dnsverify.pfmoto.com/appstatic/mall/mall_menu_kill.png'
				}
				that.rmenuList.push(miaosha)
				network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						var list = res.data
						that.rmenuList = [...that.rmenuList, ...list]
					}
				})
			},


			//查询商城新品推荐列表（APP）
			getNewListAPP: function() {
				var that = this
				that.newList = []
				let url = app.globalData.config.interfaces
					.URL_ACTIVITY_PFMALLPRODUCTS_GETNEWLISTAPP
				var params = {};
				network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						that.newList = res.data
					}
				})
			},
			//查询商城为你推荐列表（APP）
			// getTuijijanListAPP: function() {
			// 	var that = this
			// 	that.goodList = []
			// 	let url = app.globalData.config.interfaces
			// 		.URL_ACTIVITY_PFMALLPRODUCTS_GETTUIJIANLISTAPP
			// 	var params = {};
			// 	network.get(url, params, 'form').then(res => {
			// 		if (res.code == 200) {
			// 			that.goodList = res.data.list
			// 		}
			// 	})
			// },
			getTuijijanListAPP: function(pageNo, pageSize) {
				var that = this

				let url = app.globalData.config.interfaces
					.URL_ACTIVITY_PFMALLPRODUCTS_GETTUIJIANLISTAPP
				var params = {
					pageNum: pageNo,
					pageSize: pageSize
				};
				network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						that.goodList = res.data.list
						that.$refs.paging.complete(that.goodList);
					}
				})
			},


			goTouched: function(e) {
				var page = e.currentTarget.dataset.page
				uni.navigateTo({
					url: page
				})
			},
			menuNavigateTo: function(e) {
				uni.navigateTo({
					url: '/module_mall/seckill/seckill?name=' + e.name + '&categoryId=' + e.id
				})
			},
			goodsDetail: function(e) {
				uni.navigateTo({
					url: '/module_mall/goodsDetail/goodsDetail?goodid=' + e.id
				})
			}
		}
	}
</script>
<style>
	page {
		background-image: url(https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/img/my_logo_bg.png);
		width: 100%;
		height: 100%;
		background-repeat: space;
		background-size: 100%;
	}
</style>
<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.contentView {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.searchBar {
		height: 80px;
		text-align: center;
		display: flex;
		align-items: center;
		flex-direction: row;
		padding: 0 40rpx;


		// margin-top: -44px;
		justify-content: space-evenly;
		background-color: #f5f5f5;

		.logo {
			float: left;
			width: 100rpx;
			height: 40rpx;
		}

		.search {
			float: right;
		}
	}

	// 菜单
	.menu-list {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		// flex-wrap: wrap;




		.scrollView {
			width: 750rpx;
		}

		.pic-wrap {
			display: flex;
			flex-direction: row;
		}

		.menu-img {
			display: flex;
			margin: 0 auto;
			width: 120rpx;
			height: 120rpx;
		}

		.menu-title {
			font-size: 24rpx;
			color: #3D3A3A;

		}

		.menu-item {
			text-align: center;
			width: 150rpx;
			// flex: 1;
			margin: 0rpx 0;
			display: flex;
			flex-direction: column;
		}
	}


	.new-list-title {
		margin-top: 34rpx;
		width: 187rpx;
		height: 65rpx;
		position: relative;
		margin-bottom: 20rpx;
		margin-left: 20px;

		.bg {
			width: 100%;
			height: 100%;
		}

		.text {
			color: white;
			width: 142rpx;
			height: 28rpx;
			top: 5px;
			right: 5rpx;
			position: absolute;
		}
	}

	.new-list {
		width: calc(100% - 33px);
		margin-left: 33rpx;
		margin-right: 33rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.new-item {
			// width: 32%;
			width: 214rpx;
			height: 324rpx;
			margin-bottom: 10px;
			border-radius: 0.4em;
			overflow: hidden;
			background-color: white;
			margin-left: 7rpx;
			margin-right: 7rpx;
			
			
		}

		.new-img {
			position: relative;
			margin: 0 auto;
			width: 100%;
			height: 200rpx;
			border-radius: 4rpx;
			overflow: hidden;

			>img {
				width: 100%;
				height: 100%;
			}
		}

		.new-desc {

			height: 110rpx;
			width: 94%;
			background: #fff;
			padding-left: 10rpx;
			padding-right: 10rpx;
			margin: 0 auto;

			>.new-title {
				font-size: 28rpx;
				line-height: 56rpx;
				height: 56rpx;
				display: -webkit-box;
				font-weight: 400;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}

			>.new-bottom {

				font-weight: bold;

				>.new-price {
					line-height: 2;
					font-size: 24rpx;
					color: #EA5404;

				}
			}
		}

		.new-icon {
			right: 10rpx;
			top: 10rpx;
			position: absolute;
		}
	}

	// 商品列表
	.goods-list-title {
		width: 141rpx;
		height: 28rpx;
		margin-top: 50rpx;
		margin-left: 40rpx;

	}

	.goods-list {
		// width: calc(100% - 40px);
		width: 670rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 40rpx;
		justify-content: space-between;

		.goods-item {
			// width: 48%;
			width: 325rpx;
			margin-bottom: 10px;
			border-radius: 8rpx;
			overflow: hidden;
		}

		.goods-img {
			position: relative;
			margin: 0 auto;
			width: 100%;
			border-top-left-radius: 8rpx;
			border-top-right-radius: 8rpx;
			overflow: hidden;
			// background-color: red;

			>img {
				width: 100%;
				height: 100%;
			}
		}

		.goods-desc {
			border-bottom-left-radius: 8rpx;
			border-bottom-right-radius: 8rpx;
			width: 100%;
			background: #fff;
			margin: 0 auto;

			.goods-title {
				padding: 10rpx 10rpx 10rpx 10rpx;
				font-size: 28rpx;
				height: 60rpx;
				line-height: 36rpx;
				display: -webkit-box;
				font-weight: 400;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				color: #3D3A3A;
			}

			>.goods-bottom {
				padding-left: 10rpx;
				padding-right: 10rpx;
				display: flex;
				font-weight: bold;
				align-items: center;

				>.goods-price {
					font-size: 32rpx;
					line-height: 2;
					color: #EA5404;
				}

				>.goods-way {
					margin-left: 28rpx;
					width: 120rpx;
					height: 28rpx;
					border: 1px solid #3D3A3A;
					border-radius: 2px;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 28rpx;
					color: #3D3A3A;
				}
			}
		}

		.goods-icon {
			right: 10rpx;
			top: 10rpx;
			position: absolute;
		}
	}





	.swiper-item {
		height: 322rpx;
	}

	.swiper-image {
		width: 100%;
	}

	/deep/ uni-swiper .uni-swiper-dots-horizontal {
		bottom: 10px;
	}

	/deep/ uni-swiper .uni-swiper-dot {
		width: 10px;
		height: 2px;
		border-radius: 0;
	}

	/deep/ uni-swiper .uni-swiper-dot-active {
		width: 20px;
		height: 2px;
		border-radius: 0;
	}

	/deep/ uni-swiper .uni-swiper-dots-horizontal .uni-swiper-dot {
		margin-right: 4px;
	}
</style>
